<template>
  <uploader
    action="https://jsonplaceholder.typicode.com/posts/"
    class="styled-uploader"
    :showUploadList="false"
    :beforeUpload="commonUploadCheck"
    @file-uploaded="handleFileUploaded"
    ref="uploaderRef"
  >
    <div class="uploader-container">
      <h4>上传图片</h4>
    </div>
    <template #loading>
      <div class="uploader-container">
        <LoadingOutlined spin />
        <h4>上传中</h4>
      </div>
    </template>
    <template #uploaded>
      <div class="uploader-container">
        <FileImageOutlined />
        <h4>上传完成</h4>
      </div>
    </template>
  </uploader>
</template>
<script lang="ts" setup>
// 设置了样式的上传组件
import {
  DeleteOutlined,
  LoadingOutlined,
  FileOutlined,
  FileImageOutlined,
} from "@ant-design/icons-vue";
import { commonUploadCheck, UploadImgProps } from "@/helper";
import Uploader from "@/components/Uploader.vue";
import  { ChangeParam }  from "./Uploader";
import { ref, defineEmits,defineExpose, onMounted, nextTick } from "vue";
import { UploadResp }  from '@/extraType'
// const emit = defineEmits(["file-uploaded","change"]);
const emit = defineEmits<{
  (e: "file-uploaded", p: UploadResp): void;
}>()
const uploaderRef = ref();
defineExpose({
  triggerUpload: () => {
    uploaderRef.value.triggerUpload();
  },
});

const handle = (event: string, p: ChangeParam) => {
  console.log("app", event, p.msg);
};

const handleFileUploaded = (data: UploadResp) => {
  console.log("styleupload", data);
  emit("file-uploaded", data);
};
</script>
<style scoped lang="less">
.uploader-container {
  text-align: center;
  padding: 10px;
  width: 100%;
  border: 2px dotted #efefef;
  color: #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.uploader-container:hover {
  border: 2px dotted #1890ff;
  color: #1890ff;
}
.uploader-container h4 {
  color: #999;
  transition: all 0.25s ease-in-out;
}
.uploader-container:hover h4 {
  color: #1890ff;
}
.uploader-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
